<template>
	<view class="bg">
		<view class="ctenter">
			<image class="imgicon" src="../../static/img/Awards/awardsI.png" mode=""></image>
			<view class="title">
				<view class="name">赛事名称</view>
				<view class="hint">选择你心目中的冠军队伍（单选）</view>
			</view>
			<view class="team">
				<view class="teamBox" v-for="(item, index) in team_name" :style="{ backgroundColor: item.state ? '#ffe7d8' : '#f4f4f4' }" :key="index" @click="pitch(index)">
					{{item.name}} <text style="margin-left: 25rpx; font-size: 26rpx;" :style="{ color: item.state ? '#ed7f49' : '#e9e9e9' }" :key="index" class="iconfont" v-if="item.state"> &#xe619; </text>
					<text style="margin-left: 25rpx; font-size: 26rpx;" :style="{ color: item.state ? '#ed7f49' : '#e9e9e9' }" :key="index" class="iconfont" v-else> &#xe815; </text>
				</view>
			</view>
			<view class="bottom">
				<view class="box">
					<view class="box1">猜对的用户赠送一张礼卷/{{integral}}</view>
					<view class="box2">必须是会员才能参加，每个等级会员对应的次数</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				integral:55,//积分
				team_name:[
					{name:"队伍名称01",state:false},
					{name:"队伍名称01",state:false},
					{name:"队伍名称01",state:false},
					{name:"队伍名称01",state:false},
					{name:"队伍名称01",state:false},
					{name:"队伍名称01",state:false},
					{name:"队伍名称01",state:false},
					{name:"队伍名称01",state:true},
					{name:"队伍名称011111111",state:false},
					{name:"队伍名称01",state:false},
					{name:"队伍名称01",state:false},
					{name:"队伍名称01",state:false},
					{name:"队伍名称01",state:false},
					{name:"队伍名称01",state:false},
					{name:"队伍名称01",state:false},
					{name:"队伍名称01111",state:false},
				]
			}
		},
		onLoad() {
	
		},
		methods: {
			pitch(index){
				for (let i = 0; i < this.team_name.length; i++) {
					this.team_name[i].state=false
				}
				this.team_name[index].state=true
			}
		}
	}
</script>

<style>
	.bg{
		width: 100vw;
		height: 100vh;
		background-color: #f4f4f4;
		overflow: hidden;
	}
	.ctenter{
		width: 700rpx;
		height: 80%;
		background-color: #ffffff;
		margin: 20rpx auto;
		border: 1rpx solid #fff;
		border-radius: 20rpx;
		position: relative;
	}
	.imgicon{
		display: block;
		width: 144rpx;
		height: 40rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.title{
		text-align: center;
		width: 700rpx;
		margin-top: 50rpx;
		height: 100rpx;
	}
	.bg .name{
		width: 700rpx;
		font-size: 36rpx;
		font-weight: bold;
	}
	.bg .hint{
		font-size: 20rpx;
		color: #999999;
	}
	.bg .team{
		height: calc(100% - 300rpx);
		padding: 0 5rpx;
		overflow-y: scroll;
		display: flex;
		justify-content: space-between;
		align-content: flex-start;
		flex-wrap: wrap;
	}
	.bg .team .teamBox{
		padding:10rpx ;
		margin:5rpx 0 ;
		border-radius: 5rpx;
		background-color: #f4f4f4;
		font-size: 28rpx;
		color: #666666;
		height: 30rpx;
		line-height: 30rpx;
	}
	.bg .bottom{
		height: 149rpx;
		border-top: 1rpx solid #f4f4f4;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #999999;
	}
	.bg .bottom .box{
		width: 100%;
		height: 60rpx;
	}
</style>
